<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>medic</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="border: cadetblue 1px solid;padding: 20px;margin-top: 30px">
        <h1>药品一览</h1>
        <table id="demo" lay-filter="mouseTable"></table>
        <div class="layui-col-md4" style="border: cadetblue 1px solid;padding: 20px">
        <input type="text" name="title" required lay-verify="required" id="medicName" placeholder="请输入你的药械名称"
               autocomplete="off" class="layui-input" width="100px">
            <br>
            <form class="layui-form" action="">
                <div class="layui-form-item" >
                    <label class="layui-form-label">类别</label>
                    <div class="layui-input-block">
                        <select name="medicType" lay-verify="required" id ="medicType">
                            <option value=""></option>
                            <option value="药物">药物</option>
                            <option value="器械">器械</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">防治类型</label>
                    <div class="layui-input-block">
                        <select name="medicDisType" lay-verify="required" id="medicDisType">
                            <option value=""></option>
                            <option value="鼠害">鼠害</option>
                            <option value="病害">病害</option>
                            <option value="虫害">虫害</option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="layui-col-md12">
                <button class="layui-btn" type="button" id="Find">查询</button>
                <button class="layui-btn layui-bg-orange" type="button" id="buttonAdd">添加新的药械信息</button>
            </div>
        </div>
    </div>
</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
</script>
<script>
    layui.use('table', function () {
        let $ = layui.$;
        let layer = layui.layer;
        let table = layui.table;
        //第一个实例
        let show = table.render({
            elem: '#demo'
            , url: '/Trees/medic' //数据接口
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.list
                };
            }
            , cols: [[ //表头
                {field: 'pkId', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', title: '名称'}
                , {field: 'disastertype', title: '食物'}
                , {field: 'type', title: '主要危害'}
            ]]
        });
        $('#Find').on('click', function () {
            show.reload({
                where: {
                    // mouseName: $('#mouseName').val()
                    medicName:$('#medicName').val()
                    ,medicType:$('#medicType').val()
                    ,medicDisType:$('#medicDisType').val()
                }
                , page: {
                    curr: 1
                }
            })
        })

        $('#buttonAdd').on('click', function () {
            let a, b, c, d, e, f;
            layer.open({
                type: 2
                , content: "/Trees/LayUiBac/home/medic/Jump/addMedic.html"//填一个url地址
                , area: ['600px', '600px']
                , shade: ['0.9', '#393D49']
                , anim: 0
                , maxmin: true
                , btn: ["确认提交"]
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    a = body.find("input[name=medicName]").val();
                    b = body.find("select[name=medicType]").val();
                    c = body.find("select[name=medicDisType]").val();
                    d = body.find("textarea[name=purpose]").val();
                    let strs = "&medicName=" + a + "&medicType=" + b + "&medicDisType=" + c + "&purpose=" + d
                    $.ajax({
                        type: "post",
                        url: "/Trees/medic?method=add" + strs

                    })

                    layer.close(index);
                    show.reload();
                }
                , success: function (layero, index) {

                }

            })
        })
    });


</script>


</body>
</html>